<script setup>
import {reactive, ref} from "vue";
import api from '@/api'
import {ElMessage} from "element-plus";

const searchParams = ref({
	param:''
})

const dialogAddForm = ref(false)

const form = ref({
	orgName: '',
	orgNo: '',
	companyId: '',
	orgLeve: '',
	style: '1',
})


const rules = reactive({
	orgName: [
		{ required: true,trigger: 'blur' }
	],
	orgNo: [
		{
			required: true,
			trigger: 'change'
		},
	],
	companyId: [
		{
			required: true,
			trigger: 'change'
		},
	]
})

const showFormTypeTitle = ref('')
const showFormTypes = ['新建', '编辑']
const formRef = ref(null)

/**
 * 显示form弹框
 * @param typeIndex ['新建', '编辑']
 * @param row 行数据（用于编辑）
 */
const showForm = (typeIndex, row) => {
	showFormTypeTitle.value = showFormTypes[typeIndex]
	if(row) {
		form.value = JSON.parse(JSON.stringify(row))
	}
	dialogAddForm.value = true
}

/**
* 重置弹框form
*/
const dialogClose = ()=>{
	formRef.value.resetFields()
	form.value = {
		projectName: '',
		visibleRange: '',
		description: ''
	}
}

const tableRef = ref(null)

/**
 * 提交form
 */
const onsubmit = async () => {
	await formRef.value.validate(async (vaild) => {
		if (vaild) {
			let req
			if(showFormTypeTitle.value === '编辑') {
				req = await api.company.edit.post(form.value)
			}else {
				req = await api.company.add.post(form.value)
			}
			ElMessage({
				message: req.msg,
				type: 'success',
			})
			dialogAddForm.value = false
			tableRef.value.refresh() // 请求列表
		}
	})
}

/**
* 删除
* @param item 单个数据
*/
const onDelete = (item) =>{
	item.createTime = ''
	item.updateTime = ''
	api.company.delete.post(item).then(res=>{
		ElMessage({
			message: res.msg,
			type: 'success',
		})
		tableRef.value.refresh() // 请求列表
	})
}
</script>

<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button icon="el-icon-plus" type="primary" @click="showForm(0)">新建</el-button>
<!--				<el-button icon="el-icon-delete" plain type="danger"></el-button>-->
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="tableRef" :apiObj="list.apiObj"  row-key="id" :params="searchParams"
					 stripe>
				<el-table-column
					label="公司"
					prop="orgName"/>
				<el-table-column
					align="center"
					label="公司编码"
					prop="orgNo"/>
				<el-table-column
					align="center"
					label="公司四位编码"
					prop="companyId" />
				<el-table-column
					label="操作"
					align="center"
					width="150">
					<template #default="scope">
							<el-button
								size="small"
								icon="Edit"
								type="primary"
								plain
								circle
								@click="showForm(1,scope.row)"
							/>

						<el-popconfirm title="您确定要删掉该公司?" @confirm="onDelete(scope.row)" width="200">
							<template #reference>
								<el-button
									size="small"
									plain
									type="danger"
									icon="Delete"
									circle
								/>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog
		v-model="dialogAddForm"
		:close-on-click-modal="false"
		@close="dialogClose"
		:width="500"
		:title="`${showFormTypeTitle}`">
		<el-form
			ref="formRef"
			:model="form"
			label-position="top"
			label-suffix="："
			:show-message="false"
			:rules="rules">
			<el-form-item label="公司名称" prop="orgName">
				<el-input
					v-model="form.orgName"
					clearable
					placeholder="请输入公司名称"
					style="width: 90%"
				/>
			</el-form-item>
			<el-form-item label="公司编码" prop="orgNo">
				<el-input
					v-model="form.orgNo"
					clearable
					placeholder="请输入公司编码"
					style="width: 90%"
					:disabled="showFormTypeTitle === '编辑'"
				/>
			</el-form-item>
			<el-form-item label="公司四位编码" prop="companyId">
				<el-input
					v-model="form.companyId"
					clearable
					placeholder="请输入公司编码"
					style="width: 90%"
					:disabled="showFormTypeTitle === '编辑'"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			  <span class="dialog-footer">
				<el-button text @click="dialogAddForm = false">取消</el-button>
				<el-button type="primary" @click="onsubmit">
				  确定
				</el-button>
			  </span>
		</template>
	</el-dialog>
</template>

<script>
import AddUserPopover from "@/components/addUserPopover/index.vue";

export default {
	name: 'tableBase',
	components: {AddUserPopover},
	data() {
		return {
			sexFilters: [
				{text: '男', value: '男'},
				{text: '女', value: '女'}
			],
			list: {
				apiObj: this.$API.company.list
				// apiObj:''
			}
		}
	},
	created() {
		setTimeout(() => {
			console.log(this.list)
		}, 50000)
	},
	methods: {
		filterHandler(value, row, column) {
			const property = column['property']
			return row[property] === value
		}
	}
}
</script>

<style lang="scss" scoped>
.form-select {
	width: 100%;
}
</style>
